<template>
    <div class="photos-detail">
        <div class="photos-header">
            <div class="title">{{ photoinfo.title }}</div>
            <div class="subtitle">
                <p>{{ photoinfo.add_time | dataFormat }}</p>
                <p>点击：{{ photoinfo.click }}次</p>
            </div>
        </div>
        <p class="line"></p>
        <div class="body">
            <!-- 缩略图片区域 -->
            <div class="thumbs">
                <vue-preview :slides="photoslist" @close="getThumbs"></vue-preview>
            </div>
            <!-- 内容区域 -->
            <div class="content" v-html="photoinfo.content"></div>
            <!-- 评论区域 -->
            <cmt-box :id="this.id"></cmt-box>
        </div>
    </div>
</template>

<script>
import comment from "../subcomponent/comment.vue"
export default {
    data(){
        return {
            id: this.$route.params.id,
            photoinfo: {},
            photoslist: []
        }
    },
    created(){
        this.getPhotosDetail()
        this.getThumbs()
    },
    methods: {
        getPhotosDetail(){  // 获取图片详情
            this.$http.get('api/getimageInfo/' + this.id).then(result => {
                if(result.body.status === 0){
                    this.photoinfo = result.body.message[0]
                }
            })
        },
        getThumbs() {
            // 获取缩略图
            this.$http.get("api/getthumimages/" + this.id).then(result => {
                if (result.body.status === 0) {
                // 循环每个图片数据，补全图片的宽和高
                    result.body.message.forEach(item => {
                        item.msrc = item.src;
                        item.w = 600;
                        item.h = 400;
                    });
                    // 把完整的数据保存到 list 中
                    this.photoslist = result.body.message;
                }
            });
        }
    },
    components: {  // 注册组件
        "cmt-box": comment
    }
}
</script>

<style lang="scss" scoped>
.photos-detail{
    padding: 5px 10px;
    .title{
        margin: 10px 0;
        color: rgba(65, 105, 225, 0.9);
        padding: 10px 3px;
        font-size: 16px;
        font-weight: bold;
        position: relative;
        border-radius: 6px;
        margin-top: 4px;
        box-shadow: 2px 2px 6px rgba(#bbb, 0.9);
        border: 1px solid rgba(#bbb, 0.7);
        background-image: linear-gradient(to top, #cbcbcb, #d3d3d3, #eae8ed);
    }
    .subtitle{
        display: flex;
        margin: 10px;
        justify-content: space-between;
        p{
            margin: 0;
        }
    }
    .line{
        height: 1px;
        background-color: rgb(65, 105, 225);
        position: relative;
        box-shadow: inset 0 2px 5px rgba(#ccc, 0.6);
        &::before, &::after{
            display: inline-block;
            content: '';
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            top: -9px;
            background-color: rgb(65, 105, 225);
        }
        &::before{
            left: -5px;
        }
        &::after{
            right: -5px;
        }
    }
    .body{
        padding: 8px;
        .thumbs {
            /deep/ .my-gallery {
            //deep深层作用选择器
                display: flex;
                flex-wrap: wrap; //默认换行
                figure {
                    width: 30%;
                    margin: 5px;
                    img {
                        width: 100%;
                        box-shadow: 0 0 8px #999;
                        border-radius: 5px;
                    }
                }
            }
        }
        .content{
            font-size: 13px;
            line-height: 30px;
            font-weight: bold;
        }
    }
}
</style>